import React, { Component } from 'react';
import "./less/User.less"
import bgImg from '../images/user/bj_1.png'
import avatar from '../images/user/avatar.png'
import { Link } from 'react-router-dom'
import { connect } from 'react-redux'  //引入连接器
import collect_3 from '../images/user/collect_3.png'
import note_1 from '../images/user/note_1.png'
import examination_me from '../images/user/examination_me.png'
import data_me from '../images/user/data_me.png'
import my_profile from '../images/user/My Profile.png'
import notice from '../images/user/Notice.png'
import about_us from '../images/user/About us.png'

class User extends Component {
    state = {
        bannerArr: [
            { url: "!#", icon: collect_3, num: 3, text: "收藏" },
            { url: "!#", icon: note_1, num: 1, text: "笔记" },
            { url: "!#", icon: examination_me, num: 3, text: "我的考试" },
            { url: "!#", icon: data_me, num: 3, text: "学习资料" }
        ],
        listArr: [
            { url: "!#", icon: my_profile, text: "我的资料" },
            { url: "!#", icon: notice, text: "系统公告" },
            { url: "!#", icon: about_us, text: "关于我们" },
        ]
    }
    render() {
        return (
            <div className="user_page">
                <div className="user_banner" style={{ backgroundImage: `url(${bgImg})` }}>
                    <div className="user_title">个人中心</div>
                    <img className="avatar" src={avatar} alt="" />
                    <h3>猫猫没有猫耳朵</h3>
                    <ul>
                        {
                            this.state.bannerArr.map((item, index) =>
                                <li key={index} onClick={this.handleClick.bind(this)}>
                                    <Link to={item.url} disabled>
                                        <img src={item.icon} alt="" />
                                        <h4>{item.num}</h4>
                                        <span>{item.text}</span>
                                    </Link>
                                </li>
                            )
                        }
                    </ul>
                </div>
                <ul className="user_list">
                    {
                        this.state.listArr.map((item, index) =>
                            <li key={index} onClick={this.handleClick.bind(this)}>
                                <Link to={item.url} disabled>
                                    <img src={item.icon} alt="" />
                                    <span>{item.text}</span>
                                    <i className="iconfont icon-xiangyou1"></i>
                                </Link>
                            </li>
                        )
                    }
                </ul>
            </div>
        );
    }
    handleClick(){
        // 提示不能为空
        this.props.showAlert({
            // 弹框提示
            showAlert: true,
            // 弹框类型
            alertType: "warning",	// success | info | warning | error
            // 弹框内容
            alertContent: "该功能尚未开放"
        });
        setTimeout(() => {
            this.props.hideAlert();
        }, 2000)
    }
}

// dispatchToProps也是一种映射，用于传递并修改数据，这里要返回一个对象并包含一个事件
const dispatchToProps = (dispatch) => {
    return {
        showAlert(value) {
            dispatch({
                type: "showAlert",
                value
            })
        },
        hideAlert(){
            dispatch({type: "hideAlert"})
        }
    }
}

export default connect(null, dispatchToProps)(User);
